<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>

<div class="container" id="container">
  <div class="column" style="--column: 0">
    <div class="hexagon" style="--index: 1; --icon: '🚀';"></div>
    <div class="hexagon" style="--index: 2; --icon: '🎸';"></div>
    <div class="hexagon" style="--index: 3; --icon: '🤖';"></div>
    <div class="hexagon" style="--index: 4; --icon: '🫶';"></div>
    <div class="hexagon" style="--index: 5; --icon: '🔥';"></div>
  </div>
  <div class="column" style="--column: 1">
    <div class="hexagon" style="--index: 1; --icon: '🕹️';"></div>
    <div class="hexagon" style="--index: 2; --icon: '👾';"></div>
    <div class="hexagon" style="--index: 3; --icon: '✨';"></div>
    <div class="hexagon" style="--index: 4; --icon: '🌴';"></div>
    <div class="hexagon" style="--index: 5; --icon: '🖥️';"></div>
    <div class="hexagon" style="--index: 6; --icon: '💻';"></div>
  </div>
  <div class="column" style="--column: 2">
    <div class="hexagon" style="--index: 1; --icon: '⌨️';"></div>
    <div class="hexagon" style="--index: 2; --icon: '💡';"></div>
    <div class="hexagon" style="--index: 3; --icon: '🕶️';"></div>
    <div class="hexagon" style="--index: 4; --icon: '⚙️';"></div>
    <div class="hexagon" style="--index: 5; --icon: '🍒';"></div>
    <div class="hexagon" style="--index: 6; --icon: '🧙‍♂️';"></div>
    <div class="hexagon" style="--index: 7; --icon: '🎮';"></div>
  </div>
  <div class="column" style="--column: 3">
    <div class="hexagon" style="--index: 1; --icon: '👽';"></div>
    <div class="hexagon" style="--index: 2; --icon: '🌌';"></div>
    <div class="hexagon" style="--index: 3; --icon: '🎧';"></div>
    <div class="hexagon" style="--index: 4; --icon: '🌒';"></div>
    <div class="hexagon" style="--index: 5; --icon: '🌓';"></div>
    <div class="hexagon" style="--index: 6; --icon: '🌔';"></div>
    <div class="hexagon" style="--index: 7; --icon: '🎵';"></div>
    <div class="hexagon" style="--index: 8; --icon: '🎶';"></div>
  </div>
  <div class="column" style="--column: 4">
    <div class="hexagon" style="--index: 1; --icon: '❤️';"></div>
    <div class="hexagon" style="--index: 2; --icon: '🎙️';"></div>
    <div class="hexagon" style="--index: 3; --icon: '📸';"></div>
    <div class="hexagon" style="--index: 4; --icon: '🕰️';"></div>
    <div class="hexagon" style="--index: 5; --icon: '🚀';"></div>
    <div class="hexagon" style="--index: 6; --icon: '🎸';"></div>
    <div class="hexagon" style="--index: 7; --icon: '🤖';"></div>
    <div class="hexagon" style="--index: 8; --icon: '🫶';"></div>
    <div class="hexagon" style="--index: 9; --icon: '🔥';"></div>
  </div>
  <div class="column" style="--column: 5">
    <div class="hexagon" style="--index: 1; --icon: '🕹️';"></div>
    <div class="hexagon" style="--index: 2; --icon: '👾';"></div>
    <div class="hexagon" style="--index: 3; --icon: '✨';"></div>
    <div class="hexagon" style="--index: 4; --icon: '🌴';"></div>
    <div class="hexagon" style="--index: 5; --icon: '🖥️';"></div>
    <div class="hexagon" style="--index: 6; --icon: '💻';"></div>
    <div class="hexagon" style="--index: 7; --icon: '⌨️';"></div>
    <div class="hexagon" style="--index: 8; --icon: '💡';"></div>
  </div>
  <div class="column" style="--column: 6">
    <div class="hexagon" style="--index: 1; --icon: '🕶️';"></div>
    <div class="hexagon" style="--index: 2; --icon: '⚙️';"></div>
    <div class="hexagon" style="--index: 3; --icon: '🍒';"></div>
    <div class="hexagon" style="--index: 4; --icon: '🦄';"></div>
    <div class="hexagon" style="--index: 5; --icon: '📱';"></div>
    <div class="hexagon" style="--index: 6; --icon: '🖨️';"></div>
    <div class="hexagon" style="--index: 7; --icon: '📡';"></div>
  </div>
  <div class="column" style="--column: 7">
    <div class="hexagon" style="--index: 1; --icon: '🔬';"></div>
    <div class="hexagon" style="--index: 2; --icon: '🔭';"></div>
    <div class="hexagon" style="--index: 3; --icon: '🎚️';"></div>
    <div class="hexagon" style="--index: 4; --icon: '🎛️';"></div>
    <div class="hexagon" style="--index: 5; --icon: '🧬';"></div>
    <div class="hexagon" style="--index: 6; --icon: '🔮';"></div>
  </div>
  <div class="column" style="--column: 8">
    <div class="hexagon" style="--index: 1; --icon: '🧲';"></div>
    <div class="hexagon" style="--index: 2; --icon: '🛸';"></div>
    <div class="hexagon" style="--index: 3; --icon: '🪐';"></div>
    <div class="hexagon" style="--index: 4; --icon: '🌠';"></div>
    <div class="hexagon" style="--index: 5; --icon: '👓';"></div>
  </div>
</div>
<div class="switch" id="switch"></div>
</body>
<script src="index.js"></script>
</html>
